import TyOverlayex from './TyOverlayex'
import $ from 'jquery'

/* 自定义marker类
openlayers中的overlay是以dom为基础展现；
markerOptions:
position/* ol.Coordinate
offset 	Array.<number> 	标注的位置偏移值。
icon 	Icon 	标注所用的图标对象。
label Label 标注所用的标签对象
enableMassClear 	Boolean 	是否在调用map.clearOverlays清除此覆盖物，默认为true。
title 	String 	鼠标移到marker上的显示内容。
*/
class TyMarker extends TyOverlayex {
  constructor(markerOptions) {
    super(markerOptions)
    this.id = markerOptions.id
    this.position = markerOptions.position
    this.offset = markerOptions.offset
    this.icon = markerOptions.icon
    this.label = markerOptions.label
    this.enableMassClear = markerOptions.enableMassClear ? markerOptions.enableMassClear : false
    this.title = markerOptions.title
    this.container = markerOptions.container
    this.positioning = markerOptions.positioning ? markerOptions.positioning : 'top-left'
    this.data = markerOptions.data || {}
    this.stopEvent = markerOptions.stopEvent || false
  }

  createHtmlElement() {
    const createDom = (html) => {
      const marker = $(html).appendTo($('body'))
      if (this.icon) {
        const icon = $(this.icon.getInnerHtml())
        icon.appendTo(marker)
        this.icon.container = icon[0]
      }
      if (this.label) {
        const label = $(this.label.getInnerHtml())
        label.appendTo(marker)
        this.label.container = label[0]
      }
      return marker[0]
    }
    if (!this.container) {
      const html = '<span class="Ol_Marker" ' +
         (this.id === null ? '' : 'id="' + this.id + '"') +
        'style="position: absolute; ' +
        'padding: 0px; ' +
        'margin: 0px; ' +
        'border: 0px none; ' +
        'width: 0px; ' +
        'height: 0px; ' +
        'cursor: pointer; ' +
        '-moz-user-select: none;"></span>'
      this.container = createDom(html)
    }
    return this.container
  }

  openPopup(tyMap, popup) {
    if (this.overlay) {
      popup.openPopup(tyMap, this.position, popup.content)
    }
  }
}
export default TyMarker
